/**
 * Created by 2019/3/12/012
 * Author: Admin
 */
import logo from '../../logo.svg';
import React, {Component} from 'react';
import { Layout, Menu, Dropdown, Icon, message} from 'antd';
import { Avatar } from 'antd';
import 'antd/dist/antd.css';
import './index.css';
import { BrowserRouter as Router, Route, Link ,Redirect} from 'react-router-dom'
import Home from '../home/Home'
import App from '../../App'
import employee from '../table/employee'
import record from '../table/record'
import checkIn from '../table/checkIn'
import evaluate from '../table/evaluate'
import redeploy from '../table/redeploy'
import salary from '../table/salary'
import set from '../set/set'
import explain from '../explain/explain'
import Detail from "../detail/Detail";
const { Header, Content, Footer } = Layout;



export default class menu extends Component {
    constructor(props) {
        super(props);   // super,调用父类构造函数改变this指向
        console.log(props.location.pathname);
        var path =  props.location.pathname;
        var url = path.substring(path.lastIndexOf('/')+1);
        // console.log(url);
        this.state = {
            // current: props.location.state.current
            current: url||'home',
            loginState: true
        };
        //这边绑定是必要的，这样 `this` 才能在回调函数中使用
        // 解决方案：案例针对 loginOut()函数
        // 1.this.loginOut = this.loginOut.bind(this)    调用时直接this.login
        // 2.如果没在构造器中绑定函数this  可在调用时直接绑定xxx.bind(this)
        // 3.可将函数写成 xxx=()=>{ } 格式  调用时直接this.login
        // 4.可在回调函数中onClick={(e)=>this.loginOut(e)}
    }
    handleClick = (e) => {
        console.log('click ', e);
        this.setState({
            current: e.key ,
        });
    }
    loginOut=()=>{
        this.setState({
            loginState: false
        })
    }

    render() {
        const onClick = ({ key }) => {
            message.info(`Click on item ${key}`);
        };

        const menu = (
            <Menu onClick={onClick}>
                <Menu.Item key="1" onClick={this.loginOut}>退出</Menu.Item>
                <Menu.Item key="2">2nd memu item</Menu.Item>
                <Menu.Item key="3">3rd menu item</Menu.Item>
            </Menu>
        );
        //判断登陆状态
        if(!this.state.loginState) {
            return <Redirect to="/"/>
        }
        return (
            <Router>
            <Layout className="layout">
                <Header>
                    <div className="logo" >
                        <img src={logo} className="menu_img"/>
                    </div>
                    <Menu
                        theme="dark"
                        mode="horizontal"
                        defaultSelectedKeys={[this.state.current]}
                        style={{ lineHeight: '64px',float:'left',minWidth: '200px' }}
                        onClick={this.handleClick}
                    >
                        <Menu.Item key="home" ><Link to="/menu/home" ><Icon type="windows" />首页</Link></Menu.Item>
                        {/*<Menu.Item key="app" ><Link to="/menu/App">  nav 2 </Link></Menu.Item>*/}

                        <Menu.SubMenu key="employee" title={<span><Icon type="mail" /><span>员工数据管理</span></span>}>
                            <Menu.Item key="record"><Link to="/menu/employee/record">  员工档案信息</Link></Menu.Item>
                            <Menu.Item key="checkIn"><Link to="/menu/employee/checkIn">  员工考勤信息</Link></Menu.Item>
                            <Menu.Item key="evaluate"><Link to="/menu/employee/evaluate">  工作评价 </Link></Menu.Item>
                            <Menu.Item key="redeploy"><Link to="/menu/employee/redeploy">  员工调动信息</Link></Menu.Item>
                            <Menu.Item key="salary"><Link to="/menu/employee/salary">  工资管理 </Link></Menu.Item>
                        </Menu.SubMenu>
                        <Menu.Item key="set" ><Link to="/menu/set"><Icon type="setting" />设置</Link></Menu.Item>
                        <Menu.Item key="explain" ><Link to="/menu/explain"><Icon type="github" />说明</Link></Menu.Item>
                        {/*<Menu.Item key="explain" ><span onclick={this.loyout}>退出</span></Menu.Item>*/}
                    </Menu>
                    <Dropdown overlay={menu}>
                        <Avatar src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png" className="head" />
                    </Dropdown>

                </Header>
                <Content style={{ padding: '0 50px' }}>
                    {/*<Breadcrumb style={{ margin: '16px 0' }}>*/}
                        {/*<Breadcrumb.Item>Home</Breadcrumb.Item>*/}
                        {/*<Breadcrumb.Item>List</Breadcrumb.Item>*/}
                        {/*<Breadcrumb.Item>App</Breadcrumb.Item>*/}
                    {/*</Breadcrumb>*/}
                    {/*<div style={{ background: '#fff', padding: 24, minHeight: 280 }}>Content</div>*/}
                        {/*Router下只能有一个子元素*/}
                        <div style={{ background: '#fff', padding: 24, minHeight: 400 }}>
                            <Route path="/menu/home" component={Home} />
                            <Route path="/menu/Detail/:id" component = {Detail}/>
                            <Route path="/menu/App" component={App} />
                            <Route path="/menu/employee/record" component={record}/>
                            <Route path="/menu/employee/checkIn" component={checkIn}/>
                            <Route path="/menu/employee/evaluate" component={evaluate}/>
                            <Route path="/menu/employee/redeploy" component={redeploy}/>
                            <Route path="/menu/employee/salary" component={salary}/>
                            <Route path="/menu/set" component={set}/>
                            <Route path="/menu/explain" component={explain}/>
                        </div>


                    {/*<Routers/>*/}
                </Content>
                <Footer style={{ textAlign: 'center' }}>
                    Ant Design ©2018 Created by Ant UED
                </Footer>
            </Layout>
            </Router>
        )
    }

}

